<template>
  <div class="index">
    <div class="leftBox" :class="isCollapse?'collapseLeftBox':''">
      <div class="header">
        <div class="logo"></div>
      </div>
      <div class="content">
        <zy-menu :menu-list="menuList" @menuChange="menuChange" :disabled-menu-list="disabledMenuList"
                 :is-collapse="isCollapse" :openedsList="openedsList"></zy-menu>
      </div>
    </div>
    <div class="rightBox">
      <div class="header">
        <div class="open_close" @click="switchover">
          <el-image :src="collapsePic" class="collapsePic" :class="isCollapse?'reseverPic':''"></el-image>
        </div>
        <div class="breadcrumb">
          <el-breadcrumb separator="/" class="breadcrumbArea">
            <el-breadcrumb-item v-for="(breadcrumb,index) in breadcrumbList" :key="index"
                                :class="breadcrumb.path == $route.path ? 'active': ''"
                                @click.native="toRoute(breadcrumb.path)">
              {{breadcrumb.title}}
            </el-breadcrumb-item>
          </el-breadcrumb>
        </div>
        <div class="logout">
          <div class="notification" :class="{unread:unread_message>0}" @click="toNotification">
            <span class="zy-iconfont zy-notification notificationIcon"></span>
            <span class="notificationNum" v-if="unread_message>0">{{unread_message}}</span>
          </div>
          <img src="../../assets/home/headerImg.png" class="headerImg" alt="">
          <div class="webName">{{webName}}</div>
          <i class="el-icon-switch-button logoutBtn" @click="logout"></i>
        </div>
      </div>
      <div class="content">
        <transition name="component-fade" mode="out-in">
          <keep-alive>
            <router-view v-if="$route.meta.keepAlive"></router-view>
          </keep-alive>
        </transition>
        <router-view v-if="!$route.meta.keepAlive"></router-view>
      </div>
    </div>
    <notification-panel is-show-page></notification-panel>
  </div>
</template>

<script>
	import zyMenu from "./menu";
	import notificationPanel from "../common/notificationPanel"
	import {mapGetters} from "vuex";

	export default {
		name: "index",
		props: {},
		data() {
			return {
				collapsePic:require('@/assets/login/collapse.png'),
				disabledMenuList: [],
				openedsList: [],
				isCollapse: false,
				breadcrumbList: [],
			};
		},
		computed: {
			...mapGetters(['menuList', 'user_type', 'companyType', 'unread_message', 'getUserName']),
			webName() {
				let text = '';
				switch (this.user_type) {
					case 1:
						text = '公安-' + this.getUserName;
						break;
					case 2:
						text = '企业端-' + this.getUserName;
						break;
					case 4:
						text = '合作站点-' + this.getUserName;
						break;
				}
				return text
			}
		},
		watch: {
			'$route'(val) {
				this.panelChange(val);
			},
		},
		components: {
			zyMenu,
			notificationPanel
		},
		methods: {
			switchover() {
				this.isCollapse = !this.isCollapse;
			},
			panelChange(val) {
				this.breadcrumbList = [...val.meta.breadcrumb];
				this.openedsList = [val.meta.openMenu];
			},
			menuChange(menu) {
				this.toRoute(menu.route);
			},
			toRoute(path, query) {
				if (path && this.$route.path !== path) {
					this.$router.push({path: path, query: query || {}});
				}
			},
			logout() {
				this.$confirm("是否退出登录?", "提示", {
					confirmButtonText: "确定",
					cancelButtonText: "取消",
					type: "warning",
					customClass: 'message',
					closeOnClickModal: false
				}).then(() => {
					localStorage.clear();
					this.$router.replace({path: "/login"});
				});
			},
			toNotification() {
				this.$toRoutePath('/common/notificationManage');
			},
		},
		mounted() {
			this.panelChange(this.$route);
			this.$getMessageConfig();
			if (this.user_type === 2 && this.companyType !== 2) {
				this.disabledMenuList = ['/sorting/equipment', '/sorting/receive_send', '/sorting/sorting_station']
			}
		},
		created() {
		}
	}
</script>

<style scoped lang="less" src="@/style/index.less">

</style>
